<template>
  <div>
      <h2>数字计算的和:{{sum}}</h2>
      <h2>数字放大之后的状态:{{bigSum}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="increment(n)">+</button>
      <button @click="decrement(n)">-</button>
      <button @click="incrementIfOdd(n)">现在的和是奇数时在进行加+</button>
      <button @click="incrementWait(n)">等一等再加</button>
      <button @click="incrementServer">问问服务器到底加几</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
    name:'App',
    data(){
        return{
            n:1
        }
    },
    computed:{
        ...mapState(['sum']),
        ...mapGetters(['bigSum'])
    },
    methods:{
        ...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'}),
        ...mapActions(['incrementIfOdd','incrementWait','incrementServer'])
    }
}
</script>

<style>
button{
    margin-right:10px;
}
</style>